<template>
	<div class="warpper">
        <swiper :options="swiperOption">
    <!-- slides -->
    <swiper-slide v-for="item of swiperList" :key="item.id"><img class="swiper-img" :src="item.imgUrl"></swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div> <!-- 这里是插件给好的配置，用于开启选项点 -->
    </swiper>
</div>
</template>

<script>
export default {
	name: 'HomeSwiper',
	data: function(){
		return {
			swiperOption: {
                pagination: '.swiper-pagination',
                loop: true
            },
            swiperList: [{
                id: '0001',
                imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/201910/d28496945f7587c860ff02ed339717ed.jpg_750x200_862e3a67.jpg'
            }, {
                id: '0002',
                imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/b23a39921e8b78f38b61412d691d93ea.jpg_750x200_942ed7bd.jpg'
              }]
		}
	}
}
	
</script>

<style lang='stylus' scoped>
.warpper >>> .swiper-pagination-bullet-active
  background: #fff !important
.warpper  
  overflow: hidden
  width: 100%
  height: 0
  background: #eee
  padding-bottom: 26.66%
  .swiper-pagination-bullet-active
    background: red
  .swiper-img
    width: 100%

	
</style>
